<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/all.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/all.js"></script>
    <title>Database Compare</title>
</head>
<body>
<nav id="top" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <div id="database-left" class="database-container col-md-5 " style="border-right: 1px #dddddd solid">
                <span class="database-logo"></span>
                <span class="database-host"></span>
                <input class="form-control database-database" disabled>
                <small class="database-table—cnt"></small>
            </div>
            <div id="database-middle" class="database-container col-md-2">
            <div class="row">
                <div class="col-md-6" style="padding-right: 2px">
                    <a id="change-database" class="btn btn-default" style="width: 100%;" href="/">
                        <span class="glyphicon glyphicon-pencil"></span> 更换数据源
                    </a>
                </div>
                <div class="col-md-6" style="padding-left: 2px">
                    <a id="change-setting" class="btn btn-default" style="width: 100%;" href="/setting.html">
                        <span class="glyphicon glyphicon-cog"></span> 个性化设置
                    </a>
                </div>
            </div>
            </div>
            <div id="database-right" class="database-container col-md-5" style="border-left: 1px #dddddd solid">
                <span class="database-logo"></span>
                <span class="database-host"></span>
                <input class="form-control database-database" disabled>
                <small class="database-table—cnt"></small>
            </div>
        </div>
    </div>
    <div class="progress" style="margin: 0; height: 5px;">
        <div class="progress-bar progress-bar-success" role="progressbar" style="width: 0"></div>
    </div>
</nav>
<div class="container-fluid" style="margin-top: 50px; padding-top: 15px">
    <button id="toggle" class="btn btn-info btn-lg hide" style="width: 100%; margin-top: -15px" data-status="show">隐藏相同</button>
    <div class="row">
        <div id="left" class="col-md-5">
            <div class="table-title" data-toggle="collapse" data-target="#left_{{table_id}},#right_{{table_id}},#middle_{{table_id}}" data-table-id="{{table_id}}">
                <div class="clearfix">
                    <span class="label pull-left table-name">#{{table_index}} {{table_name}}</span>
                    <span class="pull-right table-comment" title="{{table_comment}}">{{table_comment_simple}}</span>
                </div>
            </div>
            <div id="left_{{table_id}}" class="collapse table-columns" data-table-id="{{table_id}}">
                <div class="well">
                    <table class="table table-condensed table-hover">
                        <thead><tr><th>#</th><th>名称</th><th>类型</th><th>非空</th><th>说明</th></tr></thead>
                        <tbody><tr data-column-id="{{column_id}}">
                            <td><span class="label">{{column_index}}</span></td>
                            <td>{{column_name}}</td>
                            <td>{{column_column_type}} <span class="label label-info">{{column_data_type}}</span></td>
                            <td><label class="label {{column_nullable_class}}">{{column_nullable}}</label></td>
                            <td><span title="{{column_comment}}">{{column_comment_simple}}</span></td>
                        </tr></tbody>
                    </table>
                    <div class="table-primary">
                        <b># 主键：</b>
                        <span class="table-primary-item-container">
                            <span class="label {{primary_column_class}} table-primary-item" data-table-index="{{table_index}}">
                                {{primary_column_name}}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="middle" class="col-md-2">
            <div class="table-title" style="text-align: center" data-table-id="{{table_id}}">
                <button class="btn btn-xs btn-danger table-button table-button-left"
                        data-table-id="{{table_id}}" data-table-index="{{table_index}}" data-table-name="{{table_name}}">&lt</button>
                <button class="btn btn-xs btn-danger table-button table-button-right"
                        data-table-id="{{table_id}}" data-table-index="{{table_index}}" data-table-name="{{table_name}}">&gt</button>
            </div>
            <div id="middle_{{table_id}}" class="collapse table-columns" data-table-id="{{table_id}}">
                <div class="well">
                    <table class="table table-condensed table-hover">
                        <thead><tr><td>&nbsp;</td><td>&nbsp;</td></tr></thead>
                        <tbody><tr data-column-id="{{column_id}}">
                            <td class="table-td text-right">
                                <button class="btn btn-xs btn-warning column-button column-button-left"
                                        data-table-id="{{table_id}}"  data-table-index="{{table_index}}" data-table-name="{{table_name}}"
                                        data-column-id="{{column_id}}" data-column-index="{{column_index}}" data-column-name="{{column_name}}">&lt</button>
                            </td>
                            <td class="table-td text-left">
                                <button class="btn btn-xs btn-warning column-button column-button-right"
                                        data-table-id="{{table_id}}"  data-table-index="{{table_index}}" data-table-name="{{table_name}}"
                                        data-column-id="{{column_id}}" data-column-index="{{column_index}}" data-column-name="{{column_name}}">&gt</button>
                            </td>
                        </tr></tbody>
                    </table>
                    <div class="table-primary">
                        <span class="table-primary-item-container">
                            <button class="btn btn-xs btn-danger primary-button primary-button-left"
                                data-table-id="{{table_id}}" data-table-index="{{table_index}}" data-table-name="{{table_name}}">&lt</button>
                            <button class="btn btn-xs btn-danger primary-button primary-button-right"
                                data-table-id="{{table_id}}" data-table-index="{{table_index}}" data-table-name="{{table_name}}">&gt</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="right" class="col-md-5">
            <div class="table-title" data-toggle="collapse" data-target="#left_{{table_id}},#right_{{table_id}},#middle_{{table_id}}" data-table-id="{{table_id}}">
                <div class="clearfix">
                    <span class="label pull-left table-name" style="font-size: inherit">#{{table_index}} {{table_name}}</span>
                    <span class="pull-right table-comment" title="{{table_comment}}">{{table_comment_simple}}</span>
                </div>
            </div>
            <div id="right_{{table_id}}" class="collapse table-columns" data-table-id="{{table_id}}">
                <div class="well">
                    <table class="table table-condensed table-hover">
                        <thead><tr><th>#</th><th>名称</th><th>类型</th><th>非空</th><th>说明</th></tr></thead>
                        <tbody><tr data-column-id="{{column_id}}">
                            <td><span class="label">{{column_index}}</span></td>
                            <td>{{column_name}}</td>
                            <td>{{column_column_type}} <span class="label label-info">{{column_data_type}}</span></td>
                            <td><label class="label {{column_nullable_class}}">{{column_nullable}}</label></td>
                            <td><span title="{{column_comment}}">{{column_comment_simple}}</span></td>
                        </tr></tbody>
                    </table>
                    <div class="table-primary">
                        <b># 主键：</b>
                        <span class="table-primary-item-container">
                            <span class="label {{primary_column_class}} table-primary-item" data-table-index="{{table_index}}">
                                {{primary_column_name}}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="btn-group btn-group-sm clearfix" role="group" style="display: block">
    <button id="page-before" type="button" class="btn btn-primary" disabled style="width: 40%">
        <span class="glyphicon glyphicon-chevron-left"></span> 上一页
    </button>
    <button id="page-current" type="button" class="btn btn-info" disabled style="width: 20%">
        <span class="glyphicon glyphicon-minus"></span>
        第<span id="page-index">0</span>页，共<span id="page-count">0</span>页
        <span class="glyphicon glyphicon-minus"></span>
    </button>
    <button id="page-after" type="button" class="btn btn-primary" disabled style="width: 40%">
        下一页 <span class="glyphicon glyphicon-chevron-right"></span>
    </button>
</div>
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <code></code>
            </div>
            <div class="modal-footer hide" style="padding-top: 7px;padding-bottom: 7px;">
                <button id="model-cancel" type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button id="model-execute" type="button" class="btn btn-primary btn-sm">执行</button>
            </div>
        </div>
    </div>
</div>
<script>
    var uuid_left = localStorage.getItem("database.left.uuid");
    var uuid_right = localStorage.getItem("database.right.uuid");
    var database_left = localStorage.getItem("database.left.database");
    var database_right = localStorage.getItem("database.right.database");

    var template_left = $("#left").html();
    var template_middle = $("#middle").html();
    var template_right = $("#right").html();

    var template_left_body = $("#left table tbody").html();
    var template_middle_body = $("#middle table tbody").html();
    var template_right_body = $("#right table tbody").html();

    var template_left_primary = $("#left .table-primary .table-primary-item-container").html();
    var template_middle_primary = $("#middle .table-primary .table-primary-item-container").html();
    var template_right_primary = $("#right .table-primary .table-primary-item-container").html();

    var page_size = 100;
    var page_index = 0;
    var page_count = 0;

    var all_tables_left = [];
    var all_tables_right = [];

    var all_table_names_left = [];
    var all_table_names_right = [];

    var all_table_names_uppercase_left = [];
    var all_table_names_uppercase_right = [];
    var all_table_names_uppercase_all = [];

    var page_tables_left = [];
    var page_tables_right = [];

    var page_table_names_left = [];
    var page_table_names_right = [];

    var page_table_names_uppercase_left = [];
    var page_table_names_uppercase_right = [];
    var page_table_names_uppercase_all = [];

    $("#left").html("<div class='center-block wait-circle'></div>");
    $("#middle").html("<div class='center-block wait-circle'></div>");
    $("#right").html("<div class='center-block wait-circle'></div>");

    console.log("database.left.uuid=" + uuid_left);
    console.log("database.right.uuid=" + uuid_right);

    function draw_database(lr) {
        $("#database-" + lr + " .database-logo").html(localStorage.getItem("database." + lr + ".provider"));
        $("#database-" + lr + " .database-host").html(localStorage.getItem("database." + lr + ".host") + ":" + localStorage.getItem("database." + lr + ".port"));
        $("#database-" + lr + " .database-database").val(localStorage.getItem("database." + lr + ".database"));
    }

    draw_database("left");
    draw_database("right");

    function get_table_by_name(tables, name) {
        if (!tables) return undefined;
        for (var i = 0; i < tables.length; i++) {
            if (tables[i].name.toUpperCase() === name.toUpperCase()) {
                return tables[i];
            }
        }
        return undefined;
    }

    function get_column_by_name(columns, name) {
        if (!columns) return undefined;
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].name.toUpperCase() === name.toUpperCase()) {
                return columns[i];
            }
        }
        return undefined;
    }

    function combine_distinct_array(arr1, arr2) {
        var arr = [];
        arr1.forEach(function (item, index) {if (!arr.includes(item)) arr.push(item);});
        arr2.forEach(function (item, index) {if (!arr.includes(item)) arr.push(item);});
        return arr;
    }

    function get_volume_names_of_table(table) {
        if (table && table.columns) {
            var column_names = [];
            table.columns.forEach(function (item, index) {column_names.push(item.name);});
            column_names.sort();
            return column_names;
        } else {
            return [];
        }
    }

    function column_type_equal(type1, type2) {
        if (type1 === type2) {
            return true;
        }
        var setting = localStorage.getItem("setting.group");
        if (setting) {
            var groups = JSON.parse(setting);
            var driver1 = localStorage.getItem("database.left.driver");
            var driver2 = localStorage.getItem("database.right.driver");
            for (var i = 0; i < groups.length; i++) {
                var items = groups[i];
                if (items.includes(driver1 + "." + type1) && items.includes(driver2 + "." + type2)) {
                    return true
                }
            }
        }
        return false;
    }

    function ignore_digest(driver, type) {
        var setting = localStorage.getItem("setting.digest");
        if (setting) {
            var digests = JSON.parse(setting);
            return digests.includes(driver + "." + type)
        }
        return false;
    }

    function column_equal(column1, column2) {
        var result = column1.name.toUpperCase() === column2.name.toUpperCase() &&
            column_type_equal(column1.dataType, column2.dataType) &&
            column1.charLength === column2.charLength &&
            column1.nullable === column2.nullable &&
            column1.comment === column2.comment;

        var driver1 = localStorage.getItem("database.left.driver");
        var driver2 = localStorage.getItem("database.right.driver");

        if (!ignore_digest(driver1, column1.dataType) || !ignore_digest(driver2, column2.dataType)) {
            result = result &&
                column1.numericPrecision === column2.numericPrecision &&
                column1.numericScale === column2.numericScale;
        }

         return result;
    }

    function primary_equal(keys1, keys2) {
        if (!keys1 || !keys2) return false;
        if (keys1.length !== keys2.length) return false;
        for (var i = 0; i < Math.max(keys1.length, keys2.length); i++) {
            if (keys1[i].toUpperCase() !== keys2[i].toUpperCase()) return false
        }
        return true;
    }

    function draw_table(lr, index, table, template) {
        if (table) {
            $("#" + lr).append(template
                .replace(new RegExp("{{table_id}}", "gm"), "table_" + index)
                .replace(new RegExp("{{table_index}}", "gm"), index)
                .replace(new RegExp("{{table_name}}", "gm"), table.name)
                .replace(new RegExp("{{table_comment}}", "gm"), table.comment)
                .replace(new RegExp("{{table_comment_simple}}", "gm"), table.comment.length <= 10 ? table.comment : (table.comment.substring(0, 10) + "..."))
            );
        } else {
            $("#" + lr).append(template
                .replace(new RegExp("{{table_id}}", "gm"), "table_" + index)
                .replace(new RegExp("{{table_index}}", "gm"), index)
                .replace(new RegExp("{{table_name}}", "gm"), "")
                .replace(new RegExp("{{table_comment}}", "gm"), "")
                .replace(new RegExp("{{table_comment_simple}}", "gm"), "")
            );
        }
        $("#" + lr + "_table_" + index + " table tbody").html("");
        $("#" + lr + "_table_" + index + " .table-primary .table-primary-item-container").html("");
    }

    function draw_table_middle(index, name) {
        $("#middle").append(template_middle
            .replace(new RegExp("{{table_id}}", "gm"), "table_" + index)
            .replace(new RegExp("{{table_index}}", "gm"), index)
            .replace(new RegExp("{{table_name}}", "gm"), name)
        );
        $("#middle_table_" + index + " table tbody").html("");
        $("#middle_table_" + index + " .table-primary .table-primary-item-container").html("");
    }

    function draw_column(lr, table_index, column_index, column, template) {
        if (column) {
            $("#" + lr + "_table_" + table_index + " table tbody").append(template
                .replace(new RegExp("{{column_id}}", "gm"), "column_" + column_index)
                .replace(new RegExp("{{column_index}}", "gm"), column_index)
                .replace(new RegExp("{{column_name}}", "gm"), column.name)
                .replace(new RegExp("{{column_data_type}}", "gm"), column.dataType)
                .replace(new RegExp("{{column_column_type}}", "gm"), column.columnType)
                .replace(new RegExp("{{column_nullable}}", "gm"), column.nullable ? "否" : "是")
                .replace(new RegExp("{{column_nullable_class}}", "gm"), column.nullable ? "label-default" : "label-danger")
                .replace(new RegExp("{{column_comment}}", "gm"), column.comment)
                .replace(new RegExp("{{column_comment_simple}}", "gm"), column.comment.length <= 10 ? column.comment : (column.comment.substring(0, 10) + "..."))
            );
        } else {
            $("#" + lr + "_table_" + table_index + " table tbody").append(template
                .replace(new RegExp("{{column_id}}", "gm"), "column_" + column_index)
                .replace(new RegExp("{{column_index}}", "gm"), column_index)
                .replace(new RegExp("{{column_name}}", "gm"), "")
                .replace(new RegExp("{{column_data_type}}", "gm"), "")
                .replace(new RegExp("{{column_column_type}}", "gm"), "")
                .replace(new RegExp("{{column_nullable}}", "gm"), "")
                .replace(new RegExp("{{column_nullable_class}}", "gm"), "label-default")
                .replace(new RegExp("{{column_comment}}", "gm"), "")
                .replace(new RegExp("{{column_comment_simple}}", "gm"), "")
            );
        }
    }
    
    function draw_primary(lr, table_index, columns, template) {
        if (columns && columns.length > 0) {
            for (var i = 0; i < columns.length; i++) {
                    $("#" + lr + "_table_" + table_index + " .table-primary .table-primary-item-container").append(template
                    .replace(new RegExp("{{table_id}}", "gm"), "table_" + table_index)
                    .replace(new RegExp("{{table_index}}", "gm"), table_index)
                    .replace(new RegExp("{{primary_column_class}}", "gm"), "label-default")
                    .replace(new RegExp("{{primary_column_name}}", "gm"), columns[0])
                );
            }
        }
    }

    function draw_column_middle(table_index, table_name, column_index, column_name) {
        $("#middle_table_" + table_index + " table tbody").append(template_middle_body
            .replace(new RegExp("{{table_id}}", "gm"), "table_" + table_index)
            .replace(new RegExp("{{table_index}}", "gm"), table_index)
            .replace(new RegExp("{{table_name}}", "gm"), table_name)
            .replace(new RegExp("{{column_id}}", "gm"), "column_" + column_index)
            .replace(new RegExp("{{column_index}}", "gm"), column_index)
            .replace(new RegExp("{{column_name}}", "gm"), column_name)
        );
    }
    
    function upper(arr) {
        var brr = [];
        for (var i = 0; i < arr.length; i++) {
            brr.push(arr[i].toUpperCase())
        }
        return brr;
    }

    function draw_compare() {
        $("#left").html("");
        $("#middle").html("");
        $("#right").html("");

        page_table_names_left = []; page_tables_left.forEach(function (item, index) {page_table_names_left.push(item.name);}); page_table_names_left.sort();
        page_table_names_right = []; page_tables_right.forEach(function (item, index) {page_table_names_right.push(item.name);}); page_table_names_right.sort();

        page_table_names_uppercase_left = upper(page_table_names_left);
        page_table_names_uppercase_right = upper(page_table_names_right);
        page_table_names_uppercase_all = combine_distinct_array(page_table_names_uppercase_left, page_table_names_uppercase_right).sort();

        var i = 0;
        var interval = setInterval(function () {

            var table_name_upper = page_table_names_uppercase_all[i];
            var table_left = get_table_by_name(page_tables_left, table_name_upper);
            var table_right = get_table_by_name(page_tables_right, table_name_upper);

            var colume_names_left = get_volume_names_of_table(table_left).sort();
            var colume_names_right = get_volume_names_of_table(table_right).sort();
            var colume_names_uppercase_left = upper(colume_names_left);
            var colume_names_uppercase_right = upper(colume_names_right);
            var colume_names_uppercase_all = combine_distinct_array(colume_names_uppercase_left, colume_names_uppercase_right).sort();

            draw_table("left", i + 1, table_left, template_left);
            draw_table("right", i + 1, table_right, template_right);
            draw_table_middle(i + 1, table_name_upper);

            var columns_equal = true;
            for (var j = 0; j < colume_names_uppercase_all.length; j++) {
                var column_name_uppercase = colume_names_uppercase_all[j];
                var columns_left = table_left ? table_left.columns : undefined;
                var columns_right = table_right ? table_right.columns : undefined;
                var column_left = get_column_by_name(columns_left, column_name_uppercase);
                var column_right = get_column_by_name(columns_right, column_name_uppercase);

                draw_column("left", i + 1, j + 1, column_left, template_left_body);
                draw_column("right", i + 1, j + 1, column_right, template_right_body);
                draw_column_middle(i + 1, table_name_upper, j + 1, column_name_uppercase);

                var $column_left = $("#left .table-columns[data-table-id=table_" + (i + 1) + "] table tbody tr[data-column-id=column_" + (j + 1) + "]");
                var $column_middle = $("#middle .table-columns[data-table-id=table_" + (i + 1) + "] table tbody tr[data-column-id=column_" + (j + 1) + "]");
                var $column_right = $("#right .table-columns[data-table-id=table_" + (i + 1) + "] table tbody tr[data-column-id=column_" + (j + 1) + "]");
                var $column_no_left = $column_left.children("td:first").children("span.label");
                var $column_no_right = $column_right.children("td:first").children("span.label");
                if (!column_left || !column_right) {
                    $column_no_left.addClass("label-danger");
                    $column_no_right.addClass("label-danger");
                    columns_equal = false;
                } else if (column_equal(column_left, column_right)) {
                    $column_no_left.addClass("label-success");
                    $column_no_right.addClass("label-success");
                    $column_left.attr("data-column-same", "data-column-same");
                    $column_right.attr("data-column-same", "data-column-same");
                    $column_middle.find(".column-button").css("visibility", "hidden");
                } else {
                    $column_no_left.addClass("label-warning");
                    $column_no_right.addClass("label-warning");
                    columns_equal = false;
                }

                if (!table_left || !table_right) {
                    $column_middle.find(".column-button").css("visibility", "hidden");
                }
            }

            var primary_key_left = table_left ? table_left.primaryKey : [];
            var primary_key_right = table_right ? table_right.primaryKey : [];

            draw_primary("left", i + 1, primary_key_left, template_left_primary);
            draw_primary("right", i + 1, primary_key_right, template_right_primary);

            var $primary_left = $("#left .table-primary-item[data-table-index=" + (i + 1) + "]");
            var $primary_middle = $("#middle .table-primary-item[data-table-index=" + (i + 1) + "]");
            var $primary_right = $("#right .table-primary-item[data-table-index=" + (i + 1) + "]");
            var primarys_equal = primary_equal(primary_key_left, primary_key_right);
            if (!table_left || !table_right) {
                $primary_left.addClass("label-danger");
                $primary_right.addClass("label-danger");
            } else if (primarys_equal) {
                $primary_left.addClass("label-success");
                $primary_right.addClass("label-success");
            } else {
                $primary_left.addClass("label-warning");
                $primary_right.addClass("label-warning");
            }

            var $table_left = $("#left .table-title[data-table-id=table_" + (i + 1) + "]");
            var $table_middle = $("#middle .table-title[data-table-id=table_" + (i + 1) + "]");
            var $table_right = $("#right .table-title[data-table-id=table_" + (i + 1) + "]");
            var $table_name_left = $table_left.find(".table-name");
            var $table_name_right = $table_right.find(".table-name");
            if (!table_left || !table_right) {
                $table_name_left.addClass("label-danger");
                $table_name_right.addClass("label-danger");
            } else if (columns_equal && primarys_equal) {
                $table_name_left.addClass("label-success");
                $table_name_right.addClass("label-success");
                $table_left.attr("data-table-same", "data-table-same");
                $table_right.attr("data-table-same", "data-table-same");
                $table_middle.find(".table-button").css("visibility", "hidden");
            } else {
                $table_name_left.addClass("label-warning");
                $table_name_right.addClass("label-warning");
                $table_middle.find(".table-button").css("visibility", "hidden");
            }

            i++;

            if (i === page_table_names_uppercase_all.length) {
                clearInterval(interval);
            }

            var percent = Math.round(i / page_table_names_uppercase_all.length * 100);
            $(".progress .progress-bar").css("width", percent + "%")

            // window.scrollTo(0, document.body.scrollHeight);
        }, 50);
    }
    
    function set_page_enable() {
        if (page_index === 1) {
            $("#page-before").attr("disabled", "disabled");
        } else {
            $("#page-before").removeAttr("disabled");
        }
        if (page_index === page_count) {
            $("#page-after").attr("disabled", "disabled");
        } else {
            $("#page-after").removeAttr("disabled");
        }
        $("#page-index").html(page_index);
        $("#page-count").html(page_count);
    }

    function page(page) {
        page_index = page;
        page_count = Math.ceil(all_table_names_uppercase_all.length / page_size);
        set_page_enable();

        var page_start = (page - 1) * page_size;
        var page_end = page * page_size - 1;
        if (page_end >= all_table_names_uppercase_all.length) {
            page_end = all_table_names_uppercase_all.length - 1;
        }

        page_tables_left = [];
        page_tables_right = [];

        for (var i = page_start; i <= page_end; i++) {
            var table_name = all_table_names_uppercase_all[i];
            var table_left = get_table_by_name(all_tables_left, table_name);
            var table_right = get_table_by_name(all_tables_right, table_name);
            if (table_left) page_tables_left.push(table_left);
            if (table_right) page_tables_right.push(table_right);
        }

        draw_compare();
    }

    function sql(lr, name) {
        var suid, tuid;
        if (lr === "left") {suid = uuid_right; tuid = uuid_left}
        if (lr === "right") {suid = uuid_left; tuid = uuid_right}
        $.get("/from/" + suid + "/" + name + "/to/" + tuid, function (data) {
            $("#model .modal-body code").html(data).attr("suid", suid).attr("tuid", tuid);
            $("#model").modal("show");
        });
    }

    $.when(
        $.get("/connect/" + uuid_left + "/" + database_left),
        $.get("/connect/" + uuid_right + "/" + database_right)
    ).fail(function (xhr, message, error) {
        window.location.href="/";
    }).done(function (arr_left, arr_right) {
        all_tables_left = arr_left[0].tables;
        all_tables_right = arr_right[0].tables;

        $("#database-left .database-table—cnt").html("共" + all_tables_left.length + "张表");
        $("#database-right .database-table—cnt").html("共" + all_tables_right.length + "张表");

        all_table_names_left = []; all_tables_left.forEach(function (item, index) {all_table_names_left.push(item.name);}); all_table_names_left.sort();
        all_table_names_right = []; all_tables_right.forEach(function (item, index) {all_table_names_right.push(item.name);}); all_table_names_right.sort();

        all_table_names_uppercase_left = upper(all_table_names_left);
        all_table_names_uppercase_right = upper(all_table_names_right);
        all_table_names_uppercase_all = combine_distinct_array(all_table_names_uppercase_left, all_table_names_uppercase_right).sort();

        page(1);
    });

    $("#middle").on("click", ".table-button-left", function () {
        var tableName = $(this).attr("data-table-name");
        sql("left", tableName);
    });
    $("#middle").on("click", ".table-button-right", function () {
        var tableName = $(this).attr("data-table-name");
        sql("right", tableName);
    });
    $("#middle").on("click", ".column-button-left", function () {
        var tableName = $(this).attr("data-table-name");
        var columnName = $(this).attr("data-column-name");
        sql("left", tableName + "." + columnName);
    });
    $("#middle").on("click", ".column-button-right", function () {
        var tableName = $(this).attr("data-table-name");
        var columnName = $(this).attr("data-column-name");
        sql("right", tableName + "." + columnName);
    });
    $("#toggle").click(function () {
        var status = $("#toggle").attr("data-status");
        if ("show" === status) {
            $("#left .table-title[data-table-same]").removeClass("show").addClass("hide");
            $("#right .table-title[data-table-same]").removeClass("show").addClass("hide");
            $("#left .table-columns table tbody tr[data-column-same]").removeClass("show").addClass("hide");
            $("#right .table-columns table tbody tr[data-column-same]").removeClass("show").addClass("hide");
            $("#toggle").html("显示所有").attr("data-status", "hide");
        } else {
            $("#left .table-title[data-table-same]").removeClass("hide").addClass("show");
            $("#right .table-title[data-table-same]").removeClass("hide").addClass("show");
            $("#left .table-columns table tbody tr[data-column-same]").removeClass("hide").addClass("show");
            $("#right .table-columns table tbody tr[data-column-same]").removeClass("hide").addClass("show");
            $("#toggle").html("隐藏相同").attr("data-status", "show");
        }
    });
    $("#page-before").click(function () {
        page(page_index - 1)
    });
    $("#page-after").click(function () {
        page(page_index + 1)
    });
    $("#model-execute").click(function () {
        var uuid = $("#model .modal-body code").attr("tuid");
        var sql = $("#model .modal-body code").text();
        $.ajax({
            url: "/connect/" + uuid + "/sql",
            type: "POST",
            data: sql,
            contentType: "application/json",
            success: function () {
                $("#model").modal("hide");
            }
        });
    })
</script>
</body>
</html>